<template>
  <q-page padding class="card-examples row items-start">
    <div v-touch-swipe.horizontal="handlerSwipe">
      <q-card inline class="bigger q-ma-sm">
        <q-card-media>
          <img :src="current.cover">
          <q-card-title class="relative-position" slot="overlay">
            <q-btn fab color="primary" icon="ion-paper-plane" @click="showDetail" class="absolute" style="top: 0; right: 8px; transform: translateY(-50%);" />
            <div class="ellipsis">{{ current.title }}</div>
            <div slot="subtitle">
              <q-rating readonly v-model="current.rate / 2" :max="5" />
              <span>&nbsp;&nbsp;{{ current.rate }}</span>
            </div>
            <!-- <div slot="right" class="row items-center">
            <q-icon name="place" /> 250 ft
          </div> -->
          </q-card-title>
        </q-card-media>

        <q-card-main>
          <span v-if="current.directors != null && current.directors.length > 0">
            <p>导演：
              <span class="text-faded" v-for="(item, index) in current.directors" :key="index">{{ item }}
                <span v-if="index < (current.directors.length-1)">、</span>
              </span>
            </p>
          </span>
          <span v-if="current.casts != null && current.casts.length > 0">
            <p>演员：
              <span class="text-faded" v-for="(item, index) in current.casts" :key="index">{{ item }}
                <span v-if="index < (current.casts.length-1)">、</span>
              </span>
            </p>
          </span>
        </q-card-main>
        <q-card-separator />
        <!-- <q-card-actions>
        <q-btn flat round icon="ion-logo-youtube" />
        <q-btn flat>大丫</q-btn>
        <q-btn flat>二丫</q-btn>
        <q-btn flat>三丫</q-btn>
      </q-card-actions> -->

        <q-inner-loading :visible="visible">
          <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
        </q-inner-loading>
      </q-card>

    </div>
  </q-page>
</template>

<script>
import { easing, openURL } from "quasar";

export default {
  name: 'Flame',
  data: () => ({
    visible: false,
    list: [],
    current: {
      cover: "statics/boy-avatar.png"
    },
    currentIndex: -1
  }),
  watch: {
    $route(to, from) {
      if (this.$route.query.nextFlame === "true") {
        this.nextFlame();
      }
    },
    currentIndex(value) {
      this.current = this.list[value];
    }
  },
  methods: {
    init() {
      // 监听 default.vue 事件
      this.$root.eventHub.$on("nextFlame", () => {
        this.nextFlame();
      });

      this.loadData();
    },
    loadData() {
      this.visible = true;
      this.$axios.get("/video/random_video_list").then(resp => {
        if (resp.data != null && resp.data.length >= 0) {
          let addFlag = false;
          if (
            this.currentIndex == -1 ||
            this.currentIndex + 1 == this.list.length
          ) {
            addFlag = true;
          }

          Array.prototype.push.apply(this.list, resp.data);

          if (addFlag && this.list.length > this.currentIndex + 1) {
            this.currentIndex++;
          }
        }

        this.visible = false;
      });
    },
    preFlame() {
      if (this.currentIndex - 1 > -1) {
        this.currentIndex--;
      } else {
        // 返回的是 undefined，不能通过 dismiss 关闭
        this.$q.notify({
          message: "小主，往左边刷刷嘛~",
          timeout: 500,
          position: "top",
          color: "dark"
        });
      }
    },
    nextFlame() {
      if (this.currentIndex + 1 < this.list.length) {
        this.currentIndex++;
      } else {
        this.loadData();
      }
    },
    // 左右刷屏
    handlerSwipe(event) {
      if (event.direction === "right") {
        this.preFlame();
      } else if (event.direction === "left") {
        this.nextFlame();
      }
    },
    showDetail() {
      // this.current.id = 26647117
      this.$axios.get(this.$config.videoUrl + "/" + this.current.id).then(resp => {
        console.log(resp)
        if (resp.data != null) {
          let res = resp.data
          let haveUrl = false
          if(res.meta_status == 'success' && res.data != null && res.data.length > 0) {
            haveUrl = true

            let url = res.data[0].fields.url
            this.$router.push({
              path: '/play?&url=' + encodeURIComponent(url),
            })
          }

          if(!haveUrl) {
            let message = '无详细资源'
            if(res.meta_message != null) {
              message = res.meta_message
            }
            message += "，即将转到豆瓣电影"
            this.$q.notify({
                message: message,
                timeout: 500,
                position: "top",
                color: "dark"
              });

            let vm = this
            setTimeout(function() {
              window.location.href = vm.current.url
            }, 2000)
          }
        }
      })
    }
  },
  created() {
    this.init();
  }
};
</script>

<style lang="stylus">
.card-examples {
  .q-card {
    width: 300px;
  }

  .bigger {
    width: 450px;
    max-width: 90vw;
  }

  @media (max-width: $breakpoint-xs-max) {
    .q-card {
      width: 100%;
    }
  }
}
</style>
